<script setup>
   // import { reactive, ref } from 'vue'
   import { ref } from 'vue'
    //默认选中的菜单索引
    const selectedIndex = ref("2-2")
    //const selectedIndex = ref("3")

    //选中菜单触发的回调
    const selected = (index, indexPath) => {
        console.log("index", index, "indexPath", indexPath)
    }

    //默认展开的菜单索引
    const defaultOpeneds = ref(["1","3"])

    //用户执行的命令
    const userCommand = (command) => { //点击菜单触发的回调
        console.log("command:", command)
    }
</script>

<template>

    <h3>水平导航</h3>
    <el-menu mode="horizontal" :default-active="selectedIndex" @select="selected">
        <el-menu-item index="1">邓瑞编程</el-menu-item>
        <el-sub-menu index="2">
            <template #title>我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4">订单管理</el-menu-item>
    </el-menu>


    <h3>水平导航-自定义样式</h3>
    <el-menu mode="horizontal" :default-active="selectedIndex" @select="selected" background-color="#545c64"
        text-color="#fff" active-text-color="#ffd04b" style="height: 40px; width: 600px;">
        <el-menu-item index="1">邓瑞编程</el-menu-item>
        <el-sub-menu index="2">
            <template #title>我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4">订单管理</el-menu-item>
    </el-menu>

    <h3>垂直导航</h3><br>
    <el-menu :default-active="selectedIndex" @select="selected" style="width: 200px;">
        <el-sub-menu index="1">
            <template #title>
                <el-icon><Search /></el-icon>
                <span>导航一</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="2">
            <el-icon><Edit /></el-icon>
            <template #title>导航二</template>
        </el-menu-item>
        <el-menu-item index="3">
            <el-icon><Delete /></el-icon>
            <template #title>导航三</template>
        </el-menu-item>
        <el-menu-item index="4">
            <el-icon><Setting /></el-icon>
            <template #title>导航四</template>
        </el-menu-item>
    </el-menu>

    <h3>垂直导航-默认展开和自定义样式</h3>
    <el-menu :default-active="selectedIndex" @select="selected" :default-openeds="defaultOpeneds"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="width: 200px;">
        <el-sub-menu index="1">
            <template #title>
                <el-icon><Search /></el-icon>
                <span>导航一</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="2">
            <el-icon><Edit /></el-icon>
            <template #title>导航二</template>
        </el-menu-item>
        <el-sub-menu index="3">
            <template #title>
                <el-icon><Search /></el-icon>
                <span>导航三</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="3-1">选项1</el-menu-item>
                <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="4">
            <el-icon><Setting /></el-icon>
            <template #title>导航四</template>
        </el-menu-item>
    </el-menu>

    <h3>面包屑</h3>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
        <el-breadcrumb-item>邓瑞编程</el-breadcrumb-item>
        <el-breadcrumb-item>dengruicode.com</el-breadcrumb-item>
    </el-breadcrumb>

    <h3>下拉菜单</h3><br>
    <el-dropdown @command="userCommand">
        <span>
            个人中心<el-icon><User /></el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="order">订单</el-dropdown-item>
                <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>

</template>

<style scoped>

</style>
